<template>
  <Content title="停机操作">
    <view class="all-view">
      <view class="header-box">
        <MyNavList :data="navData" v-model="navIndex"></MyNavList>
      </view>
      <view class="tab_content" v-if="navIndex === 0">
        <view class="content">
          <view class="card">
            设备编号
            <view class="device-no">
              {{ item.deviceNo }}
            </view>
          </view>
          <view class="panel" v-if="item.abnormalStatus === '未停机设备'">
            <view class="title">
              <view class="required">* </view>停机类别
            </view>
            <u-line></u-line>
            <view class="content">
              <u-radio-group
                v-model="value1"
                placement="column"
                @change="change"
              >
                <u-radio
                  v-for="(item, index) in value1s"
                  :key="index"
                  :label="item.label"
                  :name="item.value"
                ></u-radio>
              </u-radio-group>
            </view>
          </view>
          <view class="panel" v-if="item.abnormalStatus === '未停机设备'">
            <view class="title">
              <view class="required">* </view>停机原因
            </view>
            <u-line></u-line>
            <view class="content">
              <u-radio-group v-model="value2" placement="column">
                <u-radio
                  v-for="(item, index) in value2s"
                  :key="index"
				          @change=reasonChange(item)
                  :label="item.label"
                  :name="item.label"
                ></u-radio>
              </u-radio-group>
            </view>
          </view>
        </view>
        <view class="panel" v-if="item.abnormalStatus !== '未停机设备'">
          <view class="content">
            <u-cell
              size="large"
              :value="item.shutdownStartTime"
              label="停机开始时间"
            ></u-cell>
            <u-cell
              size="large"
              :value="item.shutdownCategory"
              label="停机类别"
            ></u-cell>
            <u-cell
              size="large"
              :value="item.reasonShutdown"
              label="停机原因"
            ></u-cell>
            <u-cell size="large" :value="item.operator" label="操作人"></u-cell>
            <u--form labelPosition="top" :model="model1">
              <u-form-item label="备注" prop="remarks" borderBottom>
                <u--textarea
                  v-model="model1.remarks"
                  placeholder="请输入内容"
                ></u--textarea>
              </u-form-item>
            </u--form>
          </view>
        </view>
        <view class="fixed-bottom">
          <u-button
            v-if="item.abnormalStatus === '未停机设备'"
            class="btn"
            type="primary"
            text="停机开始"
            @click="shutdownStart"
          ></u-button>
          <u-button
            v-if="item.abnormalStatus !== '未停机设备'"
            class="btn"
            type="primary"
            text="停机结束"
            @click="shutdownStop"
          ></u-button>
        </view>
      </view>
      <view class="tab_content" v-if="navIndex === 1">
        <view class="condition">
          <view class="tag-item-box">
            <view
              class="u-page__tag-item"
              v-for="(item, index) in radios"
              :key="index"
            >
              <u-tag
                :text="item.label"
                :plain="!item.checked"
                shape="circle"
                :name="index"
                @click="radioClick"
              >
              </u-tag>
            </view>
          </view>
          <view class="icon" @click="open">
            <u-icon name="pushpin" color="#b6b6b6" size="28"></u-icon>
          </view>
        </view>
        <view class="list">
          <view class="item" v-for="(item, index) in list" :key="index">
            <view class="text">
              <view class="device-no"> 设备编号 {{ item.deviceNo }} </view>
              <view class="device-info"> {{ item.shutdownDuration }} </view>
            </view>
            <view class="text2">
              {{ item.shutdownStartTime }} ~ {{ item.shutdownEndTime }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <u-popup :show="show" mode="right" @close="close" @open="open">
      <view class="popup-box">
        <view class="title">筛选项</view>
        <u-collapse :value="['1', '2']" ref="collapse">
          <u-collapse-item title="计划开始时间" name="1">
            <MySelectBlock
              dictCode="计划开始时间"
              @mounted="mySelectBlockMounted"
              v-model="stateList"
            >
            </MySelectBlock>
          </u-collapse-item>

          <u-collapse-item title="停机时长" name="2">
            <MySelectBlock
              dictCode="停机时长"
              @mounted="mySelectBlockMounted"
              v-model="stateList1"
            >
            </MySelectBlock>
          </u-collapse-item>
        </u-collapse>

        <view class="btn-v">
          <view class="but-box">
            <u-button class="btn" text="取消" @click="collapseClose"></u-button>
            <u-button
              class="btn"
              @click="collapseChange"
              type="primary"
              text="确定"
            ></u-button>
          </view>
        </view>
      </view>
    </u-popup>
  </Content>
</template>

<script>
import MyNavList from "@/components/myNavList.vue";
import Content from "@/components/content/index";
import { getUserInfo } from "@/store/user";
import fetch from "@/utils/fetch";
import MySelectBlock from "@/components/mySelectBlock";
import dayjs from "../../../uni_modules/uview-ui/libs/util/dayjs";
export default {
  components: {
    MyNavList,
    Content,
    MySelectBlock,
  },
  data() {
    return {
      userInfo: getUserInfo(),
      item: {},
      navIndex: 0,
      stateList: [],
      stateList1: [],
      navData: [
        {
          label: "停机操作",
        },
        {
          label: "停机历史记录",
        },
      ],
      value1: 0,
      value2: "",
      value1s: [],
      value2s: [],
      model1: {
        remarks: "",
      },
      radios: [
        {
          label: "今天",
          value: "today",
          checked: true,
        },
        {
          label: "近7天",
          value: "last7days",
          checked: false,
        },
        {
          label: "近一月",
          value: "last30days",
          checked: false,
        },
      ],
	  shutdownCategory:'',
      timeRange: "today",
      list: [],
      show: false,
	  repairOrderType:'',
    };
  },
  watch: {
    navIndex(val) {
      if (val === 0) this.find();
      if (val === 1) this.query();
    },
  },
  methods: {
	collapseClose(){},
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    mySelectBlockMounted() {
      this.$nextTick(() => {
        this.$refs.collapse.init();
      });
    },
    collapseChange() {
      this.show = false;
      this.query();
    },
    radioClick(name) {
      this.radios.map((item, index) => {
        item.checked = index === name ? true : false;
      });
      this.timeRange = this.radios.find((item) => {
        return item.checked;
      }).value;
      this.query();
    },
	reasonChange(item){
		this.repairOrderType=item.repairOrderType
	},
    shutdownStart() {
		const that=this;
      if (!this.value2) {
        uni.$emit("openToast", {
          title: "请选择停机原因",
        });
        return;
      }
      fetch("post", "/dms/mobile/addAbnormal", {
        deviceNo: this.item.deviceNo,
        shutdownCategory: this.shutdownCategory,
        reasonShutdown: this.value2,
        userName: this.userInfo.username,
      }).then(({ data }) => {
        uni.$emit("openToast", {
          type: "success",
          title: "停机开始成功",
          complete() {
			  if (that.repairOrderType=='模具故障') {
			  	uni.redirectTo({
			  		url:`/pages/mold/applyRepair/index?type=add&moldCode=${that.item.moldCode}`,
			  	})
			  }else if(that.repairOrderType=='设备故障'){
				  uni.redirectTo({
				  	url:`/pages/device/maintenance-apply/index?type=add&deviceNo=${that.item.deviceNo}`,
				  })
			  }else{
				  uni.navigateBack({
				    delta: 1,
				  });
			  }
          },
        });
      });
    },
    shutdownStop() {
      const obj = {
        deviceNo: this.item.deviceNo,
        userName: this.userInfo.username,
      };
      if (this.model1.remarks !== "") {
        obj.remarks = this.model1.remarks;
      }
      fetch("post", "/dms/mobile/updateAbnormal", obj).then(({ data }) => {
        uni.$emit("openToast", {
          type: "success",
          title: "停机结束成功",
          complete() {
            uni.navigateBack({
              delta: 1,
            });
          },
        });
      });
    },
    find() {
      this.$loading.open();
      const obj = {
        deviceNo: this.item.deviceNo,
      };
      fetch("get", "/dms/mobile/findAll", obj)
        .then(({ data }) => {

          this.item = {
            ...this.item,
            ...data,
          };
          this.$loading.close();
        })
        .finally((res) => {
          this.$loading.close();
        });
    },
    query() {
      this.$loading.open();
      console.log("stateList", this.stateList, this.stateList1);
      const date = this.$dayjs(new Date()).format("YYYY-MM-DD");
      const obj = {
        pageNum: 1,
        pageSize: 999,
        timeRange: this.timeRange,
        deviceNo: this.item.deviceNo,
        duratior: this.stateList1[0] || "",
      };
      if (this.stateList[0] === "开始时间") {
        obj.startDate = date;
      } else if (this.stateList[0] === "结束时间") {
        obj.endDate = date;
      }
      fetch("get", "/dms/mobile/getHistory", obj)
        .then(({ data }) => {
          this.list = data.records;
          this.$loading.close();
        })
        .finally((res) => {
          this.$loading.close();
        });
    },
    getDictData1() {
      fetch("get", "/dms/shutdownCategory/getShutdownCategoryList", {
        pageNum: 1,
        pageSize: 50,
      }).then((res) => {
        this.value1s = res.data.records.map((item) => ({
          label: item.shutdownCategory,
          value: item.id,
        }));
         const obj = this.value1s.find(item=>item.value == this.item.reasonShutdown)||{}
         console.log('obj',this.value1s,this.item,obj)
          this.item = {
            ...this.item,
            reasonShutdownName: obj.label
          };
        if (this.value1s.length !== 0) {
          this.value1 = this.value1s[0].value;
		      this.shutdownCategory=this.value1s[0].label;
          this.getDictData2();
        }
      });
    },
    getDictData2() {
      fetch("get", "/dms/shutdownReason/getShutdownReasonList", {
        pageNum: 1,
        pageSize: 50,
        abnormalId: this.value1,
      }).then((res) => {
        this.value2s = res.data.records.map((item) => ({
          label: item.reasonForShutdown,
          value: item.reasonForShutdown,
		  repairOrderType:item.repairOrderType
        }));
      });
    },
    change() {
      this.value2 = "";
	  this.shutdownCategory=this.value1s.find(item=>item.value==this.value1).label
      this.getDictData2();
    },
  },
  mounted() {
    this.find();
    this.getDictData1();
  },
  onLoad: function (option) {
    this.item = JSON.parse(decodeURIComponent(option.item));
  },
};
</script>

<style scoped lang="scss">
.all-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header-box {
  padding: 5px 10px 0;
  background-color: #ffffff;
  border-bottom: 1px solid #eee;
}

.tab_content {
  flex: 1;
  background: #fafafb;
  display: flex;
  flex-direction: column;

  .condition {
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }

  .tag-item-box {
    display: flex;
    gap: 10px;
  }

  .content {
    display: flex;
    flex-direction: column;
  }

  .fixed-bottom {
    margin: 10px 0 0;
    padding: 10px;
    background: #fff;
  }

  .card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e8f1f8;
    color: #4a9ee1;
    padding: 10px;
    margin: 10px 10px 0;
    border-radius: 5px;
  }

  .panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 5px;
    background-color: #fff;
    margin: 10px 10px 0;
    box-shadow: 0 0 3px #eee;

    .title {
      flex: 1;
      padding: 10px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;

      .required {
        color: red;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .content {
      width: 100%;
      padding: 10px;

      /deep/ .u-radio {
        margin-bottom: 10px;
      }
    }
  }
}

/deep/ .u-form-item__body__left__content__label {
  padding-left: 5px;
  font-size: 14px;
  color: #909193;
}

/deep/ .u-form {
  padding: 0 10px;
}

.list {
  flex: 1;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  margin: 10px;
  padding: 20px;
  box-shadow: 1px 1px 3px #eee;
  flex-direction: column;

  .text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .device-no {
      font-weight: bold;
    }

    .device-info {
      color: #eb8e8e;
    }
  }

  .text2 {
    font-size: 14px;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-top: 5px;
    color: #999;
  }
}
</style>